<template>
    <div class="demo-basic">
        <div class="author-demo">
            <div>作者：陈炼</div>
            <div>日期：2017/11/02</div>
        </div>
        <z-table-menu>
            <div slot="z-table-menu-left">
                <Input class="search-input" type="text" icon="search"  placeholder="输入内容" style="width: 210px"></Input>
            </div>
            <div slot="z-table-menu-right">
                <i class="iconfont icon-shuaxin">刷新</i>
                <i class="iconfont icon-import">导入</i>
                <i class="iconfont icon-exporting">导出</i>
            </div>
        </z-table-menu>
        <p>左右两个slot插槽内可替换自己业务内容，小图标可自行替换</p>
        <pre style="background-color: #ececec;">
            <code class="html" v-text="htmlCode">
            </code>
        </pre>
    </div>
</template>
<script>
    import hljs from 'highlight.js'
    export default {
        data () {
            return {
                htmlCode: '<z-table-menu>\n' +
                '            <div slot="z-table-menu-left">\n' +
                '                <Input class="search-input" type="text" icon="search"  placeholder="输入内容" style="width: 210px"></Input>\n' +
                '            </div>\n' +
                '            <div slot="z-table-menu-right">\n' +
                '                <i class="iconfont icon-shuaxin">刷新</i>\n' +
                '                <i class="iconfont icon-import">导入</i>\n' +
                '                <i class="iconfont icon-exporting">导出</i>\n' +
                '            </div>\n' +
                '        </z-table-menu>',
            }
        },
        // 组件被挂载的时候执行的方法
        mounted: function () {
            window.setTimeout(function () {
                $('.demo-basic pre code').each(function(i, block) {
                    hljs.highlightBlock(block);
                });
            }, 0);
        }
    }
</script>
